<!--  待确认订单页面-->
<template>
  <div>
    <div style="width: 1200px;margin:  0 auto;margin-bottom: 50PX;margin-top: 50PX">
      <el-steps :active="5">
        <el-step title="提交订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        <el-step title="支付订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        <el-step title="商家发货" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        <el-step title="确认发货" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        <el-step title="完成" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
      </el-steps>
    </div>
    <br>
    <div style="width: 1500px;margin:  0 auto; border: 1px solid #dddddd;padding: 10px">
      <div style="background-color: #dddddd;height: 80px;font-size: 18px;color: red;
        line-height: 80px;">
        <i style="margin-left: 50px" class="el-icon-collection-tag"></i>
        <span style="margin-left: 5px" >当前订单状态：已取消 </span>
        <el-button style="margin-left: 1100px" icon="el-icon-arrow-left"
                   size="mini"
                   @click="goBack"
        >返回</el-button>
      </div>

      <div style="margin:80PX 0">
        <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">基本信息</i>

        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="订单编号">{{order.orderId}}</el-descriptions-item>
          <el-descriptions-item label="下单用户">18100000000</el-descriptions-item>
          <el-descriptions-item label="支付方式" :span="2">未支付</el-descriptions-item>
          <el-descriptions-item label="物流单号" >未发货</el-descriptions-item>
<!--          <el-button style="margin-left: 1100px" icon="el-icon-arrow-left"
                     size="mini"
                     @click="goBack"
          >返回</el-button>-->
        </el-descriptions>
      </div>


      <div style="margin:80PX 0">
        <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">供货人信息</i>
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="供货方">{{order.userName}}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{order.userPhone}}</el-descriptions-item>
          <el-descriptions-item label="供货方地址" :span="2">东胜神洲花果山</el-descriptions-item>
        </el-descriptions>
      </div>


      <div style="margin:80PX 0">
        <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">商品信息</i>
        <template>
          <el-table
              :data="tableData3"
              :span-method="arraySpanMethod"
              border
              show-summary
              style="width: 100%">
            <el-table-column
                prop="picture"
                label="商品图片"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodsName"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodsPrice"
                label="商品单价">
            </el-table-column>
            <el-table-column
                prop="goodsNumber"
                label="商品数量">
            </el-table-column>
            <el-table-column
                prop="goodsTotalPrice"
                label="商品总价">
            </el-table-column>
            <!-- 合计行插槽 -->
            <template v-slot:footer>
              <el-table-column >
                <template slot-scope="scope" >
                  合计：{{ getTotal }}
                </template>
              </el-table-column>
            </template>
          </el-table>
        </template>


      </div>


      <div style="margin:80PX 0">
        <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">操作信息</i>
        <template>
          <el-table
              :data="tableData4"
              border
              style="width: 100%">
            <el-table-column
                prop="operator"
                label="操作者"
                width="180">
            </el-table-column>
            <el-table-column
                prop="modificationTime"
                label="修改时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderStatus"
                label="订单状态">
            </el-table-column>
            <el-table-column
                prop="paymentstatus"
                label="付款状态">
            </el-table-column>
            <el-table-column
                prop="shipmentStatus"
                label="发货状态">
            </el-table-column>
            <el-table-column
                prop="notes"
                label="备注">
            </el-table-column>
          </el-table>
        </template>
      </div>
      <br>

    </div>

  </div>

</template>
<script>
export default {
  data() {
    return {
      order: [] ,// 存储后端返回的数据
      tableData3: [
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,
        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,

        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,

        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,
        }],
      tableData4: [
        {
          operator: '2016-05-02',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1518 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

        },
        {
          operator: '2016-05-04',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1517 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

        },
        {
          operator: '2016-05-01',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1519 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

        },
        {
          operator: '2016-05-03',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1516 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

        }],

      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },

  //todo 修改最后一行合并的代码  合并单元格
  methods: {
    /*goBack() {
      // 使用路由跳转到另一个页面
      this.$router.push('/admin/order/goods')
    },*/
    // 订单确认
    confirmOrder(){
      this.$confirm('是否确认该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleUpdate();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        });
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    computed: {
      getTotal() {
        let total = 0;
        this.tableData.forEach(item => {
          total += item.goodsTotalPrice; // 假设最后一列的数据字段为lastColumnData
        });
        return total;
      }
    }
  },
  mounted() {
    if (this.$route.query.order) {
      this.order = JSON.parse(this.$route.query.order);
    }
  }
}

</script>
